<template>
  <div class="video-area">
    <div class="video-grid">
      <div 
        class="video-item" 
        v-for="member in members" 
        :key="member.id"
      >
        <div class="video-placeholder">
          <div 
            class="video-avatar" 
            :style="{backgroundColor: getAvatarColor(member.name)}"
          >
            {{ getInitials(member.name) }}
          </div>
        </div>
        <div class="video-info">
          {{ member.name }}{{ member.id === currentUser.id ? ' (我)' : '' }}
        </div>
        <div class="video-controls">
          <button 
            class="video-control-btn" 
            @click="$emit('toggle-member-audio', member.id)"
          >
            {{ member.audioEnabled ? '🔊' : '🔇' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoArea',
  props: {
    members: {
      type: Array,
      required: true
    },
    currentUser: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 获取用户姓名的首字母
    getInitials(name) {
      return name.charAt(0);
    },
    
    // 根据用户名获取头像颜色
    getAvatarColor(name) {
      const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#9c27b0', '#673ab7'];
      let hash = 0;
      for (let i = 0; i < name.length; i++) {
        hash = name.charCodeAt(i) + ((hash << 5) - hash);
      }
      return colors[Math.abs(hash) % colors.length];
    }
  }
}
</script>

<style scoped>
@import '../styles/video-area.css';
</style>